<template>
	<view class="home page bgf6">
		<view class="py6 flex flexC fs12 bgff" :style="{paddingTop: statusBar + 'px'}">
			<view @click="onShowCityPicker" class="px10 borr">
				<image class="down mr6" src="/static/img/icon/down_sel.png" mode="widthFix"></image>
				<text>{{city}}</text>
			</view>
			<view class="bor00 r40 flex flexC px12 py4" @click="doSearch">
				<image class="sear" src="/static/img/icon/search.png" mode="aspectFill"></image>
				<input class="pl8 flex1 fs12"  v-model="keyword" confirm-type="search" type="text" placeholder="搜索门店">
			</view>
		</view>
		<scroll-view class="list" @scrolltolower="nextPage" scroll-y :style="{height: 'calc(100vh - ' + statusBar + 'px - 76rpx)'}">
			<swiper autoplay circular class="bgImg my8">
				<swiper-item v-for="(item,index) in banner" :key="index" >
					<image class="w-20" :src="item" mode="widthFix" @click="bannerClick()"></image>
				</swiper-item>
			</swiper>
			<block v-for="(item,index) in list" :key="index">
				<store-item :item="item" @location="location" @call="call" @detail="detail"></store-item>
			</block>
		</scroll-view>
		<!-- 城市选择 -->
		<uni-popup ref="citypicker" type="bottom">
			<city-picker @selectCity="selectCity" :list="cityList"></city-picker>
		</uni-popup>
		
		<!-- 开大门，开包厢，续单 -->
		<slide-button ></slide-button>
			<msg-pop ></msg-pop>
	</view>
</template>

<script>
	import msgPop from '@/components/msg-pop/msg-popup.vue';
	
	const statusBar = uni.getSystemInfoSync().statusBarHeight + 5;
	export default {
		components: {msgPop},
		
		data() {
			return {
				statusBar,
				keyword: '',
				lat: '28.2129183',
				lng: '112.88881136',
				city: '',
				cityList: [],
				banner: [],
				locationCity: '',
				page: 1,
				list: [],
				code:'',
				isLastPage:false,
				isnodata:false,
				orgId:27
				
			}
		},
		onLoad() {
			uni.setStorageSync("orgId",this.orgId);
			var token = uni.getStorageSync("token");
			if(token == null || token == ''){
				this.init();
			}	
			this.getLocation();
		},
		
		onPullDownRefresh() {
			this.isLastPage = false;
			this.isnodata = false;
			this.page = 1;
			this.list = [];
			this.getShopList();
		},
	
		onShow() {
	
		},
		onShareAppMessage(res) {
			console.log(res);
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '雀侠智能共享棋牌', //自定义分享标题
				path: '/pages/home/index', // '/pages/...'分享页面路径（打开分享时进入页），以/开头
			}
		},
		methods: {
			
			
			bannerClick(){
				uni.navigateTo({
					url:'../member/join'
				})
			},
			nextPage(){
				if (this.isLastPage) return;
				this.page += 1;
				this.getShopList();
			},
			
			
			selectCity(item){
				
				this.$refs.citypicker.close();
				this.city = item;
				this.getShopList();
			},
			
			doSearch(){
				console.info("===search====");
				uni.navigateTo({
					url:'../shop/search'
				})
			},
			
			init() {
			
				let _this = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						let provider = res.provider;
						uni.setStorageSync("provider", provider)
					},
					fail: function(res) {
			
					}
				});
				uni.login({
					provider: uni.getStorageSync("provider"),
					success: function(loginRes) {
						console.info(loginRes);
						let code = loginRes.code;
						_this.code = code;
						_this.autoLogin();
						
			
					},
					fail: function(res) {
			
					}
				})
			},
			
			autoLogin() {
				let that = this;
				let param = {
					code:this.code,
					orgId:this.orgId
				}
				this.$api.autoLogin(param).then(res => {
			
					if (res.code == 1) {
						uni.setStorageSync("mobile", res.data.mobile);
						uni.setStorageSync("token", res.data.token);
						uni.setStorageSync("avatar", res.data.avatar);
						uni.setStorageSync("username",res.data.username)
					}
					console.info(res);
				})
			
			},

			location(item) {
				uni.openLocation({
						name: item.name,
						latitude: parseFloat(item.lat),
						longitude: parseFloat(item.lng),
						address: item.address,
						fail: function(res) {
							console.info(JSON.stringify(res))
						}
					},
					
				)
				console.log("location" + JSON.stringify(item))
			},
			call(item) {

				uni.makePhoneCall({
					phoneNumber: item.tel
				})
				console.log("call" + JSON.stringify(item))

			},
			detail(item) {
				console.log("detail" + JSON.stringify(item))
				uni.navigateTo({
					url:'../shop/detail?id='+item.id+"&distance="+item.distance
				})
			},

			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.lat = res.latitude;
						that.lng = res.longitude;
						uni.setStorageSync("lat",that.lat);
						uni.setStorageSync("lng",that.lng);
						that.initData();
						that.getShopList();
					},
					fail: function(res) {
						console.info("location  fail"+JSON.stringify(res))
					}
				})
			},

			initData() {

				let that = this;

				let param = {
					lat: this.lat,
					lng: this.lng,
					orgId:uni.getStorageSync("orgId")
				};

				this.$api.getCity(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.city = res.data.cityName;
						that.cityList = res.data.cityList;
						that.locationCity = res.data.cityName;
						that.banner = res.data.banner
					} else {

					}
				})
			},

			getShopList() {

				let that = this;
				
				var city = "";
				if(this.city == this.locationCity){
					city = "";
				}else{
					city = this.city;
				}
				let param = {
					lat: this.lat,
					lng: this.lng,
					city: city,
					page: this.page,
					orgId: uni.getStorageSync("orgId")
				};

				this.$api.getShop(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if(length <10){
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {

					}
				})

			},



			onShowCityPicker() {
				this.$refs.citypicker.open();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.down {
			width: 24rpx;
			height: 16rpx;
		}

		.sear {
			width: 24rpx;
			height: 24rpx;
		}

		.bgImg {
			width: 100%;
			height: 200rpx;
			// image {height: 100% !important;}
		}
	}
</style>
